<template>
  <div class="vs-table-box">
    <el-form
      v-loading="loading"
      label-position="right"
      :inline="true"
      :rules="rules"
      class="orm-info"
      label-width="140px"
      :model="ruleForm"
    >
      <h3>会员信息</h3>
      <el-table :data="vipInfoData" border>
        <el-table-column prop="vip_no" label="会员编号"> </el-table-column>
        <el-table-column label="会员注册门店">
          <template slot-scope="scope">
            <span>{{ scope.row.storeName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="username" label="会员姓名"> </el-table-column>
        <el-table-column prop="phone" label="会员电话"> </el-table-column>
        <el-table-column label="会员来源">
          <template slot-scope="scope">
            <span>{{ scope.row.source | sourceText }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="grade" label="会员等级">
          <template slot-scope="scope">
            <span>{{ scope.row.grade ? scope.row.grade : "散客" }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">会员偏好</div>
      <el-input
        v-model="details.service_preference"
        readonly
        type="textarea"
        show-word-limit
        maxlength="200"
        rows="3"
        style="margin-top: 10px"
      >
      </el-input>
      <!-- <div class="editServe">
        <el-button type="primary" size="mini" @click="editServe()"
          >修改</el-button
        >
      </div> -->
      <div class="titBox">
        <h3>会员卡信息</h3>
        <!-- <el-button type="text">查看更多 > </el-button> -->
      </div>
      <el-table :data="vipTableData" border>
        <el-table-column prop="date" width="100px" label="序号" type="index">
        </el-table-column>
        <el-table-column prop="name" label="开卡时间">
          <template slot-scope="scope">
            <span>{{ scope.row.date }}</span>
          </template>
        </el-table-column>
        <el-table-column label="开卡门店">
          <template slot-scope="scope">
            <span v-if="scope.row.store != null">{{
              scope.row.store.title
            }}</span>
            <span v-else>总后台</span>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="开卡充值金额（元）">
        </el-table-column>
        <el-table-column prop="give_price" label="开卡赠送金额（元）">
        </el-table-column>
        <el-table-column prop="balance" label="卡内余额（元）">
          <!-- <template slot-scope="scope">
            <span>{{ scope.row.vip.balance }}</span>
          </template> -->
          <template slot-scope="scope">
            <span>{{ parseInt(scope.row.balance) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="累计充值金额（元）">
          <template slot-scope="scope">
            <span v-if="scope.row.vip">{{
              parseInt(scope.row.vip.price)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="remarks" label="备注"> </el-table-column>
      </el-table>
      <div class="titBox">
        <h3>消费记录清单</h3>
        <el-button
          type="text"
          @click="lookMore(1)"
          v-if="consumeTableData.length"
          >查看更多 >
        </el-button>
      </div>
      <el-table :data="consumeTableData" border>
        <el-table-column label="序号" type="index" width="100px">
        </el-table-column>
        <el-table-column prop="pay_time" label="消费时间"> </el-table-column>
        <el-table-column prop="orders_payable" label="消费金额（元）">
        </el-table-column>
        <el-table-column label="消费地址">
          <template slot-scope="scope">
            <span v-if="scope.row.store">{{ scope.row.store.title }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="user_price" label="会员卡余额"> </el-table-column>
        <el-table-column prop="goods_payable" label="订单总额">
        </el-table-column>
        <el-table-column prop="remarks" label="支付明细" min-width="160">
            <template slot-scope="scope">
                <div>
                    <span style="letter-spacing: 2.5rem;">余</span>额:{{ Number(scope.row.balance) + Number(scope.row.advance_amount)}}
                </div>
                <div>
                    <span>优惠券金额:</span>{{scope.row.coupon_money}}
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="remarks" label="备注"> </el-table-column>
        <!-- <el-table-column prop="name" label="操作">
          <span class="tab-table-text" @click="dialogVisible = true">查看</span>
        </el-table-column> -->
      </el-table>
      <div class="titBox">
        <h3>项目清单</h3>
        <el-button
          type="text"
          @click="lookMore(2)"
          v-if="projectTableData.length"
          >查看更多 >
        </el-button>
      </div>
      <el-table :data="projectTableData" border>
        <el-table-column label="序号" type="index" width="100">
        </el-table-column>
        <el-table-column prop="pay_time" label="消费时间">
          <template slot-scope="scope">
            <span v-if="scope.row.orders">{{ scope.row.orders.pay_time }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="project_name" label="项目内容">
        </el-table-column>
        <el-table-column prop="orders_payable" label="消费金额（元）">
        </el-table-column>
        <el-table-column label="消费地址">
          <template slot-scope="scope">
            <span v-if="scope.row.orders">{{
              scope.row.orders.store.title
            }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="user_price" label="会员卡余额">
        </el-table-column> -->
        <el-table-column prop="name" label="备注">
          <template slot-scope="scope">
            <span v-if="scope.row.orders">{{ scope.row.orders.remarks }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="name" label="操作">
          <span class="tab-table-text" @click="dialogVisible1 = true"
            >查看</span
          >
        </el-table-column> -->
      </el-table>
      <div class="titBox">
        <h3>充值记录</h3>
        <el-button
          type="text"
          @click="lookMore(3)"
          v-if="rechargeTableData.length"
          >查看更多 >
        </el-button>
      </div>
      <el-table :data="rechargeTableData" border>
        <el-table-column label="序号" type="index" width="100">
        </el-table-column>
        <el-table-column prop="date" label="充值时间"> </el-table-column>
        <el-table-column prop="price" label="充值金额（元）"> </el-table-column>
        <el-table-column prop="give_price" label="赠送金额（元）">
        </el-table-column>
        <el-table-column prop="balance" label="剩余金额（元）">
        </el-table-column>
        <el-table-column prop="name" label="充值地址">
          <template slot-scope="scope">
            <span v-if="scope.row.store != null">{{
              scope.row.store.title
            }}</span>
            <span v-else>总后台</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="上传图片">
          <template slot-scope="scope">
            <div v-if="scope.row.img">
              <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.imgs[0]"
                :preview-src-list="scope.row.imgs"
              >
              </el-image>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <span
              v-if="scope.row.is_invoice == 0"
              class="tab-table-text"
              @click="makeInvoice(1, scope.row)"
              >开票</span
            >
            <span v-else> {{ scope.row.is_invoice | is_invoice }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="titBox">
        <h3>次卡消费图片</h3>
      </div>
      <div class="imgbox" v-if="imgbox.length">
        <el-image
          v-for="(ele, index) in imgbox"
          :key="index"
          style="width: 120px; height: 120px"
          :src="ele"
          :preview-src-list="imgbox"
        >
        </el-image>
      </div>
      <el-empty v-else description="暂无次卡消费图片"></el-empty>
    </el-form>
    <el-dialog title="消费记录清单" :visible.sync="dialogVisible" width="30%">
      <div
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        "
      >
        <div>
          时间：<el-date-picker
            style="width: 160px"
            v-model="date"
            value-format="yyyy-MM"
            size="small"
            type="month"
            placeholder="选择日期"
            @change="changeDate($event, 1)"
          >
          </el-date-picker>
        </div>
        <div>总消费：{{ Number(detailsList.total_price).toFixed(2) }}</div>
      </div>
      <div
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 10px;
        "
      >
        <div>当月消费：{{ Number(detailsList.price).toFixed(2) }}</div>
        <div>当前余额：{{ details.balance }}</div>
      </div>

      <div class="wrapBox">
        <div class="pup" v-for="(ele, index) in list" :key="index">
          <div class="pup-left">
            <div class="pup-left-img">
              <img v-if="details.avatar" :src="details.avatar" alt="" />
              <img
                v-else
                src="https://willmid-img.oss-cn-shanghai.aliyuncs.com/2021/12/06/srchttp___pic2.zhimg.com_50_v2-6b648675305dc2c9130d6db9bfe61f24_hd.jpgreferhttp___pic2.zhimg.jpg"
                alt=""
              />
            </div>
            <div class="pup-left-txt">
              <div>{{ ele.store.title }}</div>
              <div>{{ ele.pay_time }}</div>
            </div>
          </div>
          <div class="pup-right">
            <div>-{{ ele.goods_payable }}</div>
            <!-- <div>余额：{{ele.balance}}</div> -->
          </div>
          <div class="remask">
            备注：{{ ele.remarks ? ele.remarks : "暂无备注" }}
          </div>
        </div>
      </div>
    </el-dialog>

    <el-dialog title="项目清单" :visible.sync="dialogVisible1" width="30%">
      <div
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        "
      >
        <div>
          时间：<el-date-picker
            style="width: 160px"
            v-model="date"
            size="small"
            type="month"
            value-format="yyyy-MM"
            placeholder="选择日期"
            @change="changeDate($event, 2)"
          >
          </el-date-picker>
        </div>
        <div>总次数：{{ detailsList.total_count }}</div>
      </div>
      <div
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 10px;
        "
      >
        <div>
          项目：<el-select
            @change="changeProject"
            size="mini"
            v-model="project_id"
            placeholder="请选择"
            style="width: 160px"
          >
            <el-option
              v-for="item in projectList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div>当月次数：{{ detailsList.count }}</div>
      </div>
      <div class="wrapBox">
        <div class="pup" v-for="(ele, index) in list1" :key="index">
          <div class="pup-left">
            <!-- <div class="pup-left-img">
                        <img src="../../assets/images/logo.png" alt="">
                    </div> -->
            <div class="pup-left-txt">
              <div v-if="ele.orders.store">{{ ele.orders.store.title }}</div>
              <div>{{ ele.create_time }}</div>
            </div>
          </div>
          <div class="pup-right">
            <div>-{{ ele.orders_payable }}</div>
            <!-- <div>余额：{{ ele.user_price }}</div> -->
          </div>
          <div class="remask">
            备注：{{ ele.orders.remarks ? ele.orders.remarks : "暂无备注" }}
          </div>
        </div>
      </div>
    </el-dialog>

    <el-dialog title="充值记录" :visible.sync="dialogVisible2" width="700px">
      <div
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        "
      >
        <div>
          时间：<el-date-picker
            style="width: 160px"
            v-model="date"
            size="small"
            type="month"
            value-format="yyyy-MM"
            placeholder="选择日期"
            @change="changeDate($event, 3)"
          >
          </el-date-picker>
        </div>
        <div>总充值：{{ Number(detailsList.total_price).toFixed(2) }}</div>
      </div>
      <div
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 10px;
        "
      >
        <div>当月充值：{{ Number(detailsList.price).toFixed(2) }}</div>
        <div>当前余额：{{ details.balance }}</div>
      </div>

      <div class="wrapBox">
        <div class="pup pup1" v-for="(ele, index) in list2" :key="index">
          <div class="pup-left">
            <div class="pup-left-img">
              <img v-if="ele.user.avatar" :src="ele.user.avatar" alt="" />
              <img
                v-else
                src="https://willmid-img.oss-cn-shanghai.aliyuncs.com/2021/12/06/srchttp___pic2.zhimg.com_50_v2-6b648675305dc2c9130d6db9bfe61f24_hd.jpgreferhttp___pic2.zhimg.jpg"
                alt=""
              />
            </div>
            <div class="pup-left-txt">
              <div v-if="ele.store">{{ ele.store.title }}</div>
              <div v-else>总后台</div>
              <div>{{ ele.create_time }}</div>
            </div>
          </div>
          <div class="pup-right" style="width: 100px">
            <el-image
              v-if="ele.img"
              style="width: 70px; height: 70px"
              :src="ele.imgs[0]"
              :preview-src-list="ele.imgs"
            >
            </el-image>
          </div>
          <div class="pup-right">
            <div>+{{ ele.price }}</div>
            <!-- <div>余额：{{ele.user.balance}}</div> -->
          </div>
          <div class="pup-right1">
            <div
              class="invoice1"
              v-if="ele.is_invoice == 0"
              @click="makeInvoice(2, ele)"
            >
              开票
            </div>
            <div class="invoice2" v-else>{{ ele.is_invoice | is_invoice }}</div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import VsUploading from "../../components/VsUploading.vue";
export default {
  components: { VsUploading },
  data() {
    return {
      imgbox: [],
      form: {
        user_id: "",
        pay_type: "",
        price: "",
        staff_id: "",
      },
      vipInfoData: [],
      vipTableData: [], //会员卡信息
      consumeTableData: [], //消费记录
      projectTableData: [], //项目清单
      rechargeTableData: [], //充值记录
      dialogFormVisible: false,
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      loading: false,
      isBtn: false,
      ruleForm: {
        username: "",
        title: "",
        type: "",
        code: "",
      },
      rules: {
        username: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        title: [{ required: true, message: "请输入企业名称", trigger: "blur" }],
        type: [{ required: true, message: "请选择渠道", trigger: "change" }],
        code: { required: true, message: "请输入服务码", trigger: "blur" },
      },
      details: {},
      staffList: [],
      id: "",
      date: "",
      project_id: "",
      list: [],
      list1: [],
      list2: [],
      detailsList: {},
      projectList: [],
    };
  },
  filters: {
    sourceText(val) {
      switch (val) {
        case 0:
          val = "大众点评";
          break;
        case 1:
          val = "小程序";
          break;
        case 2:
          val = "电话";
          break;
        case 3:
          val = "我的管家";
          break;
        case 4:
          val = "到店";
          break;
      }
      return val;
    },
    is_invoice(val) {
      switch (val) {
        case 1:
          val = "待开票";
          break;
        case 2:
          val = "已开票";
          break;
        case 3:
          val = "已作废";
          break;
        case 4:
          val = "超时未开票";
          break;
      }
      return val;
    },
  },
  created() {
    if (this.$route.query.id) {
      console.log(this.$route.query.id, "this.$route.query.id");
      this.id = this.$route.query.id;
      this.repairGetList();
      this.getProjectList();
      var date = new Date();
      this.date = this.utils.timeMonth(date);
    }
  },
  methods: {
    changeProject() {
      this.lookMore(2, true);
    },
    // 修改服务偏好
    async editServe() {
      let { code, data } = await this.$Http.setUserService({
        id: this.id,
        service_preference: this.details.service_preference,
      });
      if (code) {
        this.$message.success("修改成功");
        this.repairGetList();
      }
    },
    // 去开票
    makeInvoice(type, row) {
      let param = {
        price: row.price,
        user_price_id: row.id,
        user_id: row.user_id,
        store: row.store,
      };
      console.log(row, "rowrowrow");
      this.utils.goUrl(`/memberMakeInvoice?params=${JSON.stringify(param)}`);
    },
    // 获取全部项目列表
    async getProjectList() {
      let { code, data } = await this.$Http.getProject({ is_all: 1 });
      let obj = {
        name: "全部",
        id: "",
      };
      this.projectList = [obj, ...data];
      console.log(
        this.projectList,
        "this.projectListthis.projectListthis.projectList"
      );
    },
    async lookMore(type, isShow) {
      if (type == 1) {
        let { code, data } = await this.$Http.getUserOrders({
          user_id: this.id,
          date: this.date,
        });
        if (!isShow) {
          this.dialogVisible = true;
        }
        this.dialogVisible = true;
        this.list = data.lists;
        this.detailsList = data;
      } else if (type == 2) {
        let { code, data } = await this.$Http.getUserProjects({
          user_id: this.id,
          date: this.date,
          project_id: this.project_id,
        });
        if (!isShow) {
          this.dialogVisible1 = true;
        }
        this.list1 = data.lists;
        this.detailsList = data;
      } else if (type == 3) {
        let { code, data } = await this.$Http.getUserPrice({
          user_id: this.id,
          date: this.date,
        });
        if (!isShow) {
          this.dialogVisible2 = true;
        }

        data.lists.forEach((ele) => {
          if (ele.img != null) {
            ele.imgs = ele.img.split(",");
          }
        });
        this.list2 = data.lists;
        this.detailsList = data;
      }
      console.log(this.date, "this.datethis.datethis.date");
    },
    async repairGetList() {
      this.loading = true;
      let { code, data } = await this.$Http.getUser({ id: this.id });
      this.loading = false;
      if (code) {
        if (data.frequency.length) {
          data.frequency.forEach((ele) => {
            this.imgbox.push(ele.img);
          });
        }
        console.log(this.imgbox, "this.imgbox");
        this.details = data;
        this.form.user_id = data.id;
        let info;
        if (data.vip != null) {
          info = {
            vip_no: data.vip_no,
            phone: data.phone,
            username: data.username,
            source: data.source,
            grade: data.vip.title,
            storeName: data.store.title,
          };
        } else {
          info = {
            vip_no: data.vip_no,
            phone: data.phone,
            username: data.username,
            source: data.source,
            grade: "",
            storeName: "",
          };
        }
        this.vipInfoData = [info];
        data.vip_lists.forEach((ele) => {
          ele.balance = this.details.balance;
        });
        data.recharge.forEach((ele) => {
          console.log(ele);
          ele.balance = this.details.balance;
        });
        if (data.vip_lists.length >= 10) {
          console.log(1111111111111);
          this.vipTableData = data.vip_lists.slice(0, 10);
        } else {
          console.log(222222222);
          this.vipTableData = data.vip_lists;
        }
        if (data.consume.length >= 10) {
          console.log(333333333);
          this.consumeTableData = data.consume.slice(0, 10);
        } else {
          console.log(44444444444);
          this.consumeTableData = data.consume;
        }
        if (data.project.length >= 10) {
          this.projectTableData = data.project.slice(0, 10);
        } else {
          this.projectTableData = data.project;
        }
        data.recharge.forEach((ele) => {
          if (ele.img != null) {
            ele.imgs = ele.img.split(",");
          }
        });
        if (data.recharge.length >= 10) {
          this.rechargeTableData = data.recharge.slice(0, 10);
        } else {
          this.rechargeTableData = data.recharge;
        }
      }
    },
    changeDate(e, type) {
      this.date = e;
      this.lookMore(type, true);
    },
    handleClose(dom) {
      dom && dom();
      this.date = "";
      // this.dialogVisible = false;
    },
    setAd() {},
  },
};
</script>

<style lang="scss" scoped>
.pup {
  margin-top: 10px;
  background-color: #f5f5f5;
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  align-items: center;
  .pup-left {
    display: flex;
    flex: 1;
    .pup-left-img {
      width: 40px;
      height: 40px;
      margin-right: 10px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 6px;
      }
    }
    .pup-left-txt {
      > div {
        line-height: 20px;
      }
    }
  }
  .pup-right {
    text-align: right;
    width: 150px;
    > div {
      line-height: 20px;
    }
  }
  .pup-right1 {
    width: 120px;
    text-align: right;
    .invoice1 {
      cursor: pointer;
      color: #1890ff;
    }
    .invoice2 {
      color: #606266;
    }
  }
  .remask {
    width: 100%;
    line-height: 20px;
  }
}
.pup1 {
  align-items: center;
}
.imbox {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 35px;
  img {
    width: 180px;
    height: 180px;
    border-radius: 8px;
    margin-right: 30px;
  }
  video {
    width: 180px;
    height: 180px;
  }
}
.titBox {
  display: flex;
  justify-content: space-between;
  align-content: center;
  ::v-deep .el-button {
    margin-left: 20px;
  }
}
.wrapBox {
  max-height: 500px;
  overflow: hidden;
  overflow-y: auto;
}

.editServe {
  margin: 15px 0 10px 0;
}
.imgbox {
  display: flex;
  .el-image {
    border-radius: 8px;
    margin-right: 20px;
    margin-bottom: 20px;
  }
}
.el-empty {
  padding-top: 0;
  ::v-deep.el-empty__image {
    width: 120px;
  }
}
</style>